<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>会员统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
        .body {
            background-image: url("/images/1.jpg")
        }
    </style>
</head>
<body class="body">

<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="year" style="background-color:#18c7df;min-height:300px;padding: 10px"></div>
            <div id="month" style="background-color:rgba(83,222,37,0.96);min-height:300px;padding: 10px"></div>
        </div>
    </div>


</div>

<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/echarts/echartsMin.js"></script>
<script>
    layui.use(function () {
        let $ = layui.jquery;

        /**
         * 柱状图
         */
        /*按年统计*/
        let myChartByYear = echarts.init(document.getElementById('year'));
        let year = [];
        let countByYear = [];
        $.ajax({
            url: '/statistics/year',
            type: 'GET',
            async: false,
            success: function (result) {
                if (result) {
                    for (let i = 0; i < result.length; i++) {
                        year.push(result[i].date);
                        countByYear.push(result[i].count);
                    }
                }
            }
        });
        // 指定图表的配置项和数据
        let optionByYear = {
            textStyle: {
                color: '#e6ff02',
            },
            title: {
                text: '会员注册数量（按年）',
                color : '#FF0000'
            },
            tooltip: {},
            xAxis: {
                data: year
            },
            yAxis: {},
            series: [
                {
                    name: '人数',
                    type: 'line',
                    data: countByYear,
                    smooth: true,
                    color: '#f1ee33',
                },
                {
                    name: '人数',
                    type: 'bar',
                    data: countByYear,
                    smooth: true,
                    color: '#ff0ef3',
                }
            ]
        };
        myChartByYear.setOption(optionByYear);

        /**
         * 柱状图
         */
        /*按月统计*/
        let myChartByMonth = echarts.init(document.getElementById('month'));
        let month = [];
        let countByMonth = [];
        $.ajax({
            url: '/statistics/month',
            type: 'GET',
            async: false,
            success: function (result) {
                if (result) {
                    for (let i = 0; i < result.length; i++) {
                        month.push(result[i].date);
                        countByMonth.push(result[i].count);
                    }
                }
            }
        });
        // 指定图表的配置项和数据
        let optionByMonth = {
            textStyle: {
                color: 'rgba(236,156,7,0.98)',
            },
            title: {
                text: '会员注册数量（按月）',
                color : '#FF0000'
            },
            tooltip: {},
            legend: {
                data: ['单位（个）'],
            },
            xAxis: {
                data: month
            },
            yAxis: {},
            series: [
                {
                    name: '人数',
                    type: 'line',
                    data: countByMonth,
                    smooth: true,
                    color: '#f1ee33',
                },
                {
                    name: '人数',
                    type: 'bar',
                    data: countByMonth,
                    smooth: true,
                    color: '#ff0ef3',
                }
            ]
        };
        myChartByMonth.setOption(optionByMonth);

    });
</script>
</body>
</html>
